Rollup 和 webpack 的区别

它是模块化打包工具，它不是替代 webpack，尽可能高效地构建精简且易分发的 JavaScript 库，只是让打包代码更小更快，配置精简，专门针对类库的打包

Rollup

• 打包库
• rollup 小而美 打包体积小、代码精简、代码注入少

Webpack

• 打包一个应用
• 代码分割、静态资源导入

用法

@rollup/plugin-json 解析 json 文件 @rollup/plugin-node-resolve 可以到 node_module 查找模块 import { stringify } from 'qs'; @rollup/plugin-commonjs commonjs 模块转化成 es6 @rollup/plugin-eslint @rollup/plugin-typescript rollup-plugin-terser

@rollup/plugin-babel plugins: [babel({ babelHelpers: 'bundled' })]

• inline 每个文件都插入
• external @babel/plugin-external-helpers
• bundled 每个帮手一个副本
• runtime 它必须与@babel/plugin-transform-runtime相结合使用

babel 在转译的过程中， 对 syntax 的处理可能会使用到 helper 函数， 对 api 的处理会引入 polyfill。 问题： 全局变量（引入 polyfill 时会直接修改全局变量及其原型，造成原型污染） helper 重复（babel 在每个需要使用 helper 的地方都会定义一个 helper，导致最终的产物里有大量重复的 helper；

@babel/plugin-transform-runtime 的作用是将 helper 和 polyfill 都改为从一个统一的地方引入，并且引入的对象和全局变量是完全隔离的，这样解决了上面的两个问题。

如何选择

如果你需要进行代码分割，或者你有很多的静态资源，再或者你做的东西深度依赖 CommonJS，毫无疑问 Webpack 是你的最佳选择。如果你的代码基于 ES2015 模块编写，并且你做的东西是准备给他人使用的，你或许可以考虑使用 Rollup。